<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2025-01-06 18:49:47
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-09-08 10:24:19
 * @FilePath: \BLOG\src\components\common\LoadingMore.vue
-->
<template>
  <div class="bottom-loading-warp">
    <div class="bottom-loading" v-if="length != 0">
      <img v-if="loading" style="width: 36px; height: 36px" src="@/assets/images/common/loading.svg" alt="" srcset="" />
      <div v-if="!loading && hasMore" :style="{ padding: isMobi ? '0px 60px' : '0px 80px' }" class="btn-more pointer" @click="handleLoadMore">
        {{ btnText }}
      </div>
      <div v-if="!hasMore && !loading" class="no-more">很高兴你翻到这里，但是真的没有更多的给你咯...</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useResize from '@/hooks/useResize';

const { isMobi } = useResize();

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  length: {
    type: Number,
    default: 0
  },
  hasMore: {
    type: Boolean,
    default: false
  },
  btnText: {
    type: String,
    default: '加载更多...'
  }
});

const emits = defineEmits(['loadMore']);

const handleLoadMore = () => {
  emits('loadMore');
};
</script>

<style scoped lang="scss">
.bottom-loading-warp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  .bottom-loading {
    height: 76px;
    padding: 20px 10px;
    display: inline-block;
    .btn-more {
      padding: 10px 20px;
      border-radius: 36px;
      height: 36px;
      line-height: 36px;
      background-color: var(--theme-light-color-9);
      color: var(--theme-color);
      border: 1px solid var(--theme-light-color-5);
    }
    .no-more {
      height: 36px;
      line-height: 36px;
      color: var(--theme-light-color-3);
    }
  }
}
</style>
